<template>
	<cl-crud ref="crud" @load="onLoad">
		<cl-pagefull @resize="onResize">
			<template #head>
				<el-row type="flex">
					<cl-filter-group v-model="search">

						<cl-filter label="品牌">
							<cl-select
								v-model="search.bra_id"
								placeholder="全部"
								clearable
								filterable
								multiple
								collapse-tags
							>
								<el-option
									v-for="item in bizRefData.brand"
									:key="item.bra_id"
									:label="item.bra_name"
									:value="item.bra_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="时间">
							<cl-date-picker
								v-model="search.date"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								style="width: 230px"
								:clearable="false"
							/>
						</cl-filter>
					</cl-filter-group>
					<cl-flex1 />
					<cl-table-handle
						:print="printParams"
						:columns="initColumns"
						v-model="tableData.columns"
						@export-file="exportFile"
					/>
				</el-row>
			</template>

			<cl-table v-bind="tableData" id="afterPersonal" />
		</cl-pagefull>
	</cl-crud>
</template>

<script>
import dayjs from "dayjs";
import { cloneDeep } from "cl-admin/utils";
import { exportExcel } from "@/utils/excel";

export default {
	name: "AfterOnsalePersonal",
	data() {
		return {
			search: {
				date: [
					dayjs()
						.startOf("day")
						.format("YYYY-MM-DD"),
					dayjs()
						.endOf("day")
						.format("YYYY-MM-DD")
				],
				bra_id: []
			}, //搜索条件
			initColumns: [
				{
					label: "日期",
					prop: "date",
					disable: true,
					minWidth: 120,
					fixed: true
				},
				{
					label: "定金人数",
					prop: "preDepositNum",
					sortable: true,
					minWidth: 170
				},
				{
					label: "到店总人头数",
					prop: "arrivePerson",
					sortable: true,
					minWidth: 150
				},
				{
					label: "到店新客人头数",
					prop: "arriveNewPerson",
					sortable: true,
					minWidth: 170
				},
				{
					label: "到店老转新人头数",
					prop: "arriveOtnPerson",
					sortable: true,
					minWidth: 170
				},
				{
					label: "我的定金数",
					prop: "ownDeposit",
					sortable: true,
					minWidth: 150
				},
				{
					label: "总到店率",
					prop: "arriveRate",
					sortable: true,
					minWidth: 150
				},
				{
					label: "新客到店率",
					prop: "arriveNewRate",
					sortable: true,
					minWidth: 170
				},
				{
					label: "老转新到店率",
					prop: "arriveOtnRate",
					sortable: true,
					minWidth: 150
				},
				{
					label: "总业绩（￥）",
					prop: "achieve",
					sortable: true,
					minWidth: 150
				},
				{
					label: "新客业绩（￥）",
					prop: "achieveNew",
					sortable: true,
					minWidth: 170
				},
				{
					label: "老转新业绩（￥）",
					prop: "achieveOtn",
					sortable: true,
					minWidth: 170
				}
			],
			tableData: {
				"context-menu": ["refresh"],
				sortRefresh: false,
				columns: [],
				props: {
					showSummary: true,
					summaryMethod: this.getSummaries,
					maxHeight: 720
				}
			},
			printParams: {
				id: "afterPersonal",
				popTitle: "个人报表"
			}
		};
	},
	computed: {
		bizRefData() {
			let biz_id = this.getCurrBiz();
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.init();
		this.tableData.columns = cloneDeep(this.initColumns);
	},
	methods: {
		init() {
			let biz_id = this.getCurrBiz();
			this.getBizRefBrand(biz_id);
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.onsale)
				.set("dict", {
					api: {
						page: "reportPersonal"
					}
				})
				.done();
			app.refresh(this.search);
		},
		onResize(h) {
			this.tableData.props.maxHeight = h;
		},
		// crud刷新
		refresh() {
			this.$refs.crud.refresh({ page: 1, ...this.search });
		},
		//合计
		getSummaries({ columns, data }) {
			let preDepositNumSum = 0,
				arrivePersonSum = 0,
				arriveNewPersonSum = 0,
				ownDepositSum = 0;
			return columns.map((column, index) => {
				if (index === 0) {
					return "合计";
				}
				if (column.property === "arriveRate") {
					if (ownDepositSum) {
						let result = arrivePersonSum / ownDepositSum;
						return this.toFixed(result * 100) + "%";
					} else {
						return 0 + "%";
					}
				}
				if (column.property === "arriveNewRate") {
					if (preDepositNumSum) {
						let result = arriveNewPersonSum / preDepositNumSum;
						return this.toFixed(result * 100) + "%";
					} else {
						return 0 + "%";
					}
				}
				if (column.property === "arriveOtnRate") {
					return "";
				}
				const values = data.map(item => Number(item[column.property]));
				let sum = values.reduce((prev, curr) => {
					const value = Number(curr);
					if (!isNaN(value)) {
						return prev + curr;
					}
					return prev;
				}, 0);
				if (column.property === "preDepositNum") {
					preDepositNumSum = sum;
				}
				if (column.property === "arrivePerson") {
					arrivePersonSum = sum;
				}
				if (column.property === "arriveNewPerson") {
					arriveNewPersonSum = sum;
				}
				if (column.property === "ownDeposit") {
					ownDepositSum = sum;
				}
				return this.toFixed(sum);
			});
		},
		// 导出EXCEl
		exportFile() {
			exportExcel("#afterPersonal");
		}
	}
};
</script>

<style lang="scss" scoped></style>
